
<%
  String path = request.getContextPath();
  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/vehicle_screening.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
  <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
  <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
  <script src="https://webapi.amap.com/maps?v=2.0&key=15a7063e08f355fead69e0defdff2c0f"></script>
  <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
<!-- 头部 -->
<div id="head">
  <div class="layui-col-md2">
    <div class="grid-demo ">
      <div class="head-logo"></div>
    </div>
  </div>
  <div class="layui-col-md2">
    <div class="grid-demo head-demo"><a href="${pageContext.request.contextPath}/index.jsp" class="word-1">首页</a></div>
  </div>
  <div class="layui-col-md2">
    <div class="grid-demo head-demo"><a href="${pageContext.request.contextPath}/car/getCarView" class="head-hover word-1">自驾租车</a>
    </div>
  </div>
  <%--    <div class="layui-col-md1">--%>
  <%--        <div class="grid-demo head-demo"><a href="${pageContext.request.contextPath}/long_time_older/long_time.jsp" class="head-hover word-1">长租专区</a>--%>
  <%--        </div>--%>
  <%--    </div>--%>
  <div class="layui-col-md2">
    <div class="grid-demo head-demo"><a href=" ${pageContext.request.contextPath}/carOutlets/carAllList" class="head-hover word-1">车型查询</a>
    </div>
  </div>
  <div class="layui-col-md2">
    <div class="grid-demo head-demo"><a href="${pageContext.request.contextPath}/Offline_outlets/Business_outlets.jsp" class="head-hover word-1">营业网点</a></div>
  </div>
  <%--    <div class="layui-col-md1">--%>
  <%--        <div class="grid-demo head-demo"><a href="" class="head-hover word-1">会员专区</a></div>--%>
  <%--    </div>--%>
  <div class="layui-col-md2">
    <div class="grid-demo head-demo1">
      <i class="login-icon"></i>
      <a href="${pageContext.request.contextPath}/login/login.jsp" class="head-color">登录/注册</a>
    </div>
    <div class="tel">
      <i class="tel-icon"></i>
      <span class="tel-num">110-119-1111</span>
    </div>
  </div>
</div>








<!-- 选择筛选栏 -->
<div class="screening">
  <div class="screeningtemp">






    <!-- 固定地图 -->
    <div class="map">
      <div class="map-container">
        <div class="mapz" id="container"> </div>
      </div>
    </div>
    </div>
    <div class="shopMessage">
      <li class="l1">门店:</li>
      <li class="l2">八一农大金字塔广场</li>
      <li class="l1">八一农大西门</li>
      <li class="l3">门店电话：13555564739</li>
    </div>






    <!-- 选择取车时间和门店-->
    <div class="choose">
      <div class="choose1" >


        <!-- 地点选择 -->
        <div class="chooseLoc">

          <!--取车 -->
          <label>取车门店:</label>
          <li class="left-one">
            <div><input type="text" value="苏州" class="layui-input area-one" ></div>
            <div class="toChoose" style="display: none;">
              <div class="select">
                <span>选择还车地点:</span>
                <div class="select-city"></div>
                <div class="select-area"></div>
                <div class="select-store"></div>
              </div>
            </div>
            <div>
              <input type="text" placeholder="选择取车门店" class="layui-input backStore">
            </div>
          </li>





          <!-- 还车 -->
          <label>还车门店:</label>
          <li class="left-two">
            <div>
              <input type="text" value="苏州" class="layui-input area-two">
            </div>
            <div class="toChoose2"  style="display: none;">
              <div class="select">
                <span>选择还车地点:</span>
                <div class="select-city1"></div>
                <div class="select-area1" ></div>
                <div class="select-store1"></div>
              </div>
            </div>
            <div>
              <input type="text" placeholder="选择还车门店" class="layui-input backStore2">
            </div>
          </li>
        </div>



        <!-- choosetime -->
        <div class="chooseTime">
          <!-- 开始 -->
          <label>取车时间:</label>
          <div  class="getTime" >
            <div class="layui-form">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <div class="layui-inline">
                    <div class="layui-input-inline">
                      <input type="text"  class="layui-input" id="test5" placeholder="开始时间">
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>




          <!-- 还车时间 -->
          <label>还车时间:</label>
          <div class="back">



            <div class="layui-form">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <div class="layui-inline">
                    <div class="layui-input-inline">
                      <input type="text" autocomplete="off" class="layui-input"  id="test6" placeholder="结束时间">
                    </div>
                  </div>
                </div>
              </div>
            </div>




          </div>
        </div>
        <div class="selectsumbit">

          <a href="javascript:void(0)" >
            查询
          </a>
        </div>
      </div>
    </div>



    <!-- 选择 -->
    <div class="chooseCar">
      <!-- 热门车型 -->
      <div class="hotcar">
        <div class="hotcarchoose">
          热销
          <img src="${pageContext.request.contextPath}/images/热销.svg" style="margin-top: 15px;">

        </div>

        <li>
          <a href="javascript:void(0)" class="hot-active">
            经济型
            <img src="${pageContext.request.contextPath}/images/荣威550.png" alt="">

          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            精英型
            <img src="${pageContext.request.contextPath}/images/荣威550.png" alt="">

          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            家用型
            <img src="${pageContext.request.contextPath}/images/荣威550.png" alt="">

          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            豪华型
            <img src="${pageContext.request.contextPath}/images/荣威550.png" alt="">

          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            超豪华型
            <img src="${pageContext.request.contextPath}/images/荣威550.png" alt="">

          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            新能源
            <img src="${pageContext.request.contextPath}/images/荣威550.png" alt="">

          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            高端车
            <img src="${pageContext.request.contextPath}/images/荣威550.png" alt="">

          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            家用豪华型
            <img src="${pageContext.request.contextPath}/images/荣威550.png" alt="">
          </a>
        </li>
        <li>
          <a href="javascript:void(0)">
            家用型
            <img src="${pageContext.request.contextPath}/images/荣威550.png" alt="">

          </a>
        </li>


      </div>

<script>
  layui.use('laydate', function(){
  var laydate = layui.laydate;
  //日期时间选择器

  laydate.render({
    elem: '#test5'
    ,type: 'datetime'
  });
  laydate.render({
    elem: '#test6'
    ,type: 'datetime'
  });
})</script>

      <!-- 品牌 -->
      <div class="car-brand">
        <div class="car-lable">品牌:</div>
        <div class="carbrandname">
          <li><a href="javascript:void(0)" class="active">全部</a></li>
          <li><a href="javascript:void(0)">Benz</a></li>
          <li><a href="javascript:void(0)">Porsche</a></li>
          <li><a href="javascript:void(0)">Ferrari</a></li>
          <li><a href="javascript:void(0)">McLaren</a></li>
          <li><a href="javascript:void(0)">Honda</a></li>
          <li><a href="javascript:void(0)">Toyota</a></li>
          <li><a href="javascript:void(0)">Audi</a></li>
          <li><a href="javascript:void(0)">BMW</a></li>
          <li><a href="javascript:void(0)">Benz</a></li>
          <li><a href="javascript:void(0)">Porsche</a></li>
          <li><a href="javascript:void(0)">Ferrari</a></li>
          <li><a href="javascript:void(0)">McLaren</a></li>
          <li><a href="javascript:void(0)">Honda</a></li>
          <li><a href="javascript:void(0)">Toyota</a></li>
          <li><a href="javascript:void(0)">Audi</a></li>
          <li><a href="javascript:void(0)">BMW</a></li>
          <li><a href="javascript:void(0)">Benz</a></li>
          <li><a href="javascript:void(0)">Porsche</a></li>
          <li><a href="javascript:void(0)">Ferrari</a></li>
          <li><a href="javascript:void(0)">McLaren</a></li>
          <li><a href="javascript:void(0)">Honda</a></li>
          <li><a href="javascript:void(0)">Toyota</a></li>
          <li><a href="javascript:void(0)">Audi</a></li>
          <li><a href="javascript:void(0)">BMW</a></li>
          <li><a href="javascript:void(0)">Benz</a></li>
          <li><a href="javascript:void(0)">Porsche</a></li>
          <li><a href="javascript:void(0)">Ferrari</a></li>
          <li><a href="javascript:void(0)">McLaren</a></li>
          <li><a href="javascript:void(0)">Honda</a></li>
          <li><a href="javascript:void(0)">Toyota</a></li>
          <li><a href="javascript:void(0)">Audi</a></li>
          <li><a href="javascript:void(0)">BMW</a></li>
          <li><a href="javascript:void(0)">Porsche</a></li>
          <li><a href="javascript:void(0)">Ferrari</a></li>
          <li><a href="javascript:void(0)">McLaren</a></li>
        </div>
      </div>


      <!-- 价格区间 -->
      <div class="car-price">
        <div class="car-lable">价格:</div>
        <div class="car-pricechoose">
          <li><a href="javascript:void(0)" class="active">全部</a></li>
          <li><a href="javascript:void(0)">8888以上</a></li>
          <li><a href="javascript:void(0)">8888-7777</a></li>
          <li><a href="javascript:void(0)">7777-6666</a></li>
          <li><a href="javascript:void(0)">6666-5555</a></li>
          <li><a href="javascript:void(0)">5555-4444</a></li>
          <li><a href="javascript:void(0)">4444-3333</a></li>
          <li><a href="javascript:void(0)">3333-2222</a></li>

        </div>
      </div>
    </div>


  </div>
</div>


<!-- 排序 -->
<div class="paixu">
  <div class="moren"><li><a href="javascript:void(0)">默认排序</a></li></div>
  <div class="zujin"><li><a href="javascript:void(0)">按租金</a></li></div>

</div>


<%--车辆 --%>
<c:forEach var="carview" items="${carsView.data}">
<div class="cars">
  <div class="car">
    <div class="car-img"><img src="${carview.imgPath}" alt="" style="width: 270px"></div>
    <div class="car-message">
      <b>${carview.carName}</b><br>
      <label >${carview.carSeat}座/${carview.carCase}/${carview.carDisplacement}T</label>
      <a href="">车辆详情></a><br>
      <div class="car-tag">
        <div class="car-tag-1">时尚</div>
        <div class="car-tag-1">运动</div>
        <div class="car-tag-1">操控</div>
        <div class="car-tag-1">蓝牙连接</div>
      </div>
    </div>
    <div class="time-text">
      <b class="time-text1">￥${carview.carPrice}</b>/日均
      <a class="btn-yuding" href="${pageContext.request.contextPath}/car/${carview.carId}">
        <button class="buy-again">预定</button>
      </a>
    </div>
  </div>
</div>
</c:forEach>

<!-- es车辆  -->
<c:forEach var="carData" items="${carList}" varStatus="loop">
<div class="cars">
  <div class="car">
    <div class="car-img"><img src="${pageContext.request.contextPath}/${carData.other1}" alt="" style="width: 270px"></div>
    <div class="car-message">
      <b class="carName">${carData.carName}</b><br>
      <label>${carAddress.getBusinessOutlets().getOutletsName()}</label><br>
                    <label>自动 2.0T | 三厢 |5座 | </label>
      <div class="car-tag">
        <div class="car-tag-1">时尚</div>
        <div class="car-tag-1">运动</div>
        <div class="car-tag-1">操控</div>
        <div class="car-tag-1">蓝牙连接</div>
      </div>
    </div>
    <div class="time-text">
      <b class="time-text1">￥${carData.carPrice}</b>/日均
      <a class="btn-yuding" href="${pageContext.request.contextPath}/car/${carData.carId}">
        <input type="submit" class="buy-again" value="预定">
      </a>
    </div>
  </div>

</c:forEach>


<!-- foot -->
<div class="footer">
  <div class="footer-box">
    <div class="footer-left">
      <p>
        <span>关于无忧</span> |
        <span>移动客户端</span> |
        <span>帮助中心</span> |
        <span>建议专区</span> |
        <span>联系我们</span> |
        <span>友情连接</span> |
        <span>投诉通道：400-821-1608</span>
      </p>
      <p>
        <span>Copyright © 2007-2022 苏州无忧信息技术服务有限公司 ICP证：苏B2-20140130|苏ICP备08010394号-1</span>
      </p>
    </div>
    <div class="footer-right"></div>
  </div>
</div>

<script src="${pageContext.request.contextPath}/js/vehicle_screening.js"></script>
<%--<script>--%>

<%--  carAllList();--%>

<%--  function carAllList(){--%>
<%--    var token = localStorage.getItem("token");--%>
<%--    var loginUser = token.data.loginCustomer;--%>
<%--    $.ajax({--%>
<%--      type: "get",--%>
<%--      url: "car/carAllList",--%>
<%--      dataType:"json",--%>
<%--      data: {},--%>
<%--      success: function (result) {--%>
<%--        console.log(result);--%>

<%--        if(loginUser != null) {--%>
<%--          $(".head-color").text(loginUser.custName);--%>
<%--          $(".head-color").attr("href", "customer/getId/" + loginUser.custId);--%>
<%--        }else{--%>
<%--          console.log("2222222")--%>
<%--          $(".head-color").text("登录");--%>
<%--          $(".head-color").attr("href", "login/login.jsp");--%>
<%--        }--%>
<%--      }--%>
<%--    })--%>
<%--  }--%>
<%--</script>--%>
  <script>
    loadInitData();
    $(".exit-token").click(function (){
      localStorage.clear();
    })


    function loadInitData(){
      console.log("00000000000000")
      var token = localStorage.getItem("token");
      // ----->cpmtollrt toke 你=-----
      console.log("token-----:"+token)

      $.ajax({
        type: "get",
        url: "${pageContext.request.contextPath}/customer/personalData",
        headers: {"token": token},
        success: function (result) {
          console.log(result);
          var loginUser = result.data.loginCustomer;

          if(loginUser != null) {
            $(".head-color").text(loginUser.custName);
            $(".head-color").attr("href", "${pageContext.request.contextPath}/customer/getId/" + loginUser.custId);

          }else{
            console.log("2222222")
            $(".head-color").text("登录");
            $(".head-color").attr("href", "login/login.jsp");
          }
        }
      })
    }
  </script>
</body>
</html>
